<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar statusBar background-color="#F7F7F7" fixed :border="false">
			<block slot="left">
				<view class="city" @click="getplace()">
					<image src="../../static/dw.png"></image>
					<view class="cityname">
						<text class="uni-nav-bar-text">{{ address }}</text>
					</view>
					<uni-icons type="arrowdown" color="#666" size="18" />
				</view>
			</block>
			<view class="input-view"> 首页 </view>
		</uni-nav-bar>
		<!-- 搜索框 -->
		<view class="searchbox">
			<view class="search">
				<view class="scan">
					<image src="../../static/ss1.png"></image>
				</view>
				<view class="inputbox" @click="tosearch">
					<input placeholder="搜索商品" :disabled="true" />
				</view>
				<view class="searchbut">搜索</view>
			</view>
			<!-- <view class="scancode" @click="toscan()">
				<image src="../../static/sao.png"></image>
			</view> -->
		</view>
		<view>
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item class="swiper-item" v-for="(item, index) in adlist" :key="index"
					@click="topages(adlist[index].link_url)">
					<image :src="item.img"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="category">
			<view class="catelist" v-for="(item, index) in catelist" :key="index" @click="tourl(item, index)">
				<image :src="item.img"></image>
				<view>{{ item.title }}</view>
			</view>
		</view>
		<!-- 大板块（直播，优惠卷等 -->
		<homemian :goodsStuff="goodsStuff" :couponList="couponList"></homemian>
		<!-- 商品 -->
		<goods :list="goodsList" :logo="true" @togoodsinfo="togoodsinfo"></goods>
		<uni-popup ref="popup" type="center">
			<view class="popupbox">
				<view style="height: 70rpx"></view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
					<view class="couponlist" v-for="(item, index) in message" :key="index">
						<view class="leftbox" v-if="item.couponinfo">
							<!-- //coupon_type==1 coupon_money满减劵 coupon_type==2 折扣劵 -->
							<view style="margin-top: 38rpx; text-align: center"
								v-if="item.couponinfo.coupon_type == 1 || item.couponinfo.coupon_type == 3">
								<text style="font-size: 28rpx">￥</text>
								<text v-if="item.couponinfo.coupon_type == 1">{{ parseFloat(item.couponinfo.coupon_money)
								}}</text>
								<text v-if="item.couponinfo.coupon_type == 3">{{ parseFloat(item.couponinfo.coupon_money)
								}}</text>
							</view>
							<view style="margin-top: 30rpx; text-align: center" v-if="item.couponinfo.coupon_type == 2">
								<text style="font-size: 32rpx">{{ parseFloat(item.couponinfo.discount_percent / 10)
								}}折</text>
							</view>
						</view>
						<view class="rightbox">
							<view class="coupontype"> 
							<text v-if="item.couponinfo.use_type==1">全平台可用</text>
							<text v-if="item.couponinfo.use_type==2">商城可用</text>
							<text v-if="item.couponinfo.use_type==3">外卖可用</text>
							<text v-if="item.couponinfo.use_type==4">商户可用</text>
							<text v-if="item.couponinfo.use_type==5">停车场可用</text>
							<text v-if="item.couponinfo.use_type==6">指定商品可用</text>
							</view>
							<view class="rule" v-if="item.couponinfo.coupon_type == 1 || item.couponinfo.coupon_type == 2">
								满{{ item.couponinfo.usable_money }}元使用</view>
							<view class="rule" v-if="item.couponinfo.coupon_type == 3">满{{ item.couponinfo.usable_money
							}}元使用 </view>
							<view class="time" v-if="item.couponinfo">
								<view>{{ item.couponinfo.expire_time | dateFormat }}</view>
								<view class="butbox" @click="tousercoupon(item)">去使用</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="gb">
				<image @click="close()" src="../../static/gb1.png"></image>
			</view>
		</uni-popup>
		<u-back-top :scroll-top="scrollTop" :iconStyle="{
			color: '#fff',
		}" :customStyle="{
	backgroundColor: '#F94D29',
	color: '#fff',
}" top="600"></u-back-top>
	</view>
</template>

<script>
import homemian from "../../components/homemain.vue"
import goods from "../../components/goods.vue"
export default {
	components: {
		homemian,
		goods,
	},
	data() {
		return {
			city: "北京",
			catelist: [
				{
					img: "../../static/sy1.png",
					title: "停车缴费",
					path: "/pages/addcar/addcar",
				},
				// {
				// 	img: "../../static/sy2.png",
				// 	title: "美食外卖",
				// 	path: "/pageshop/takeout/takeout",
				// },
				{
					img: "../../static/sy2.png",
					title: "云智慧选商圈",
					path: "/pages/businessdistrict/businessdistrict",
				},
				// {
				// 	img: "../../static/sy3.png",
				// 	title: "金福提货劵",
				// 	path: "/personalData/myBalance/myBalance",
				// },
				{
					img: "../../static/sy4.png",
					title: "使用说明",
					path: "/pages/useinfo/useinfo",
				},
			],
			adlist: [], //轮播图
			couponList: [], //优惠券couponList
			goodsList: [], //商品列表
			address: "",
			location: [],
			goodsStuff: [],
			carlist: [],
			scene: "",
			message: [], //弹窗优惠卷
			scrollTop: 0,
			page: 1,
			loading:false,
			isEnd:false
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onReachBottom() {
		this.getindex()
	},
	onShow() {
		this.getindex()
	},
	onLoad(option) {
		console.log(option, "option")
		this.scene = option.scene
		uni.setStorageSync("group_id", this.scene)
		this.getplace()
	},
	filters: {
		//过滤器 用于格式化时间
		dateFormat: function (value) {
			var date = new Date(value * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear()
			var month = ("0" + (date.getMonth() + 1)).slice(-2)
			var sdate = ("0" + date.getDate()).slice(-2)
			var hour = ("0" + date.getHours()).slice(-2)
			var minute = ("0" + date.getMinutes()).slice(-2)
			var second = ("0" + date.getSeconds()).slice(-2)
			// 拼接
			var result = year + "-" + month + "-" + sdate + "- " + hour + ":" + minute //+ ":" + second;
			// 返回
			return result
		},
	},
	methods: {
		open() {
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs.popup.open("center")
		},
		tousercoupon(){
			this.close()
		},
		close() {
			this.$http({
				url: "api/wechat/setMessageStatus",
				data: {
					message_ids: this.message.map((item) => {
						return item.id
					}),
				},
			}).then((res) => {
				this.$refs.popup.close()
			})
		},
		onShareAppMessage(res) {
			if (res.from === "button") {
				// 来自页面内分享按钮
				console.log(res.target)
			}
			// return {
			//   title: "邀请好友",
			//   path: '/pages/index/index?pid='+this.id
			// }
		},
		onShareTimeline() {
			return {
				title: "快乐生活，就到云智慧选",
				path: "/pages/index/index",
			}
		},
		//扫码
		toscan() {
			// 允许从相机和相册扫码
			uni.scanCode({
				success: function (res) {
					console.log("条码类型：" + res.scanType)
					console.log("条码内容：" + res.result)
					// uni.navigateTo({
					// 	url: res.result
					// })
				},
			})
		},
		getmyinfo() {
			this.$http({
				url: "api/Wechat/userCarList",
			}).then((res) => {
				this.carlist = res.data.filter((item) => item.isdefault == 1)
				if (this.carlist.length == 0) {
					uni.navigateTo({
						url: "/pages/addcar/addcar",
					})
				} else {
					uni.navigateTo({
						url: "/pages/cartime/cartime?car_no=" + this.carlist[0].car_no,
					})
				}
			})
		},
		async getindex() {
			try {
				if (this.loading || this.isEnd) return
				this.loading = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				await this.$http({
					url: "api/Wechat/index",
					data: {
						page_index: this.page,
						page_size: 12
					},
				}).then((res) => {
					this.goodsList = [...this.goodsList, ...res.data.goodsList]
					this.adlist = res.data.adlist
					this.couponList = res.data.couponList.slice(0, 2)
					this.goodsStuff = res.data.goodsStuff.slice(0, 2)
					this.page++
					this.isEnd = res.data.goodsList.length < 12
					this.message = res.data.message.filter(item=>item.type==1)
					if (this.message.length > 0) {
						this.open()
					} else {
					}
				})
			} finally {
				uni.hideLoading()
				this.loading = false
			}
		},
		//跳是商品详情
		togoodsinfo(result) {
			uni.navigateTo({
				url: "/pageshop/goodsinfo/goodsinfo?id=" + result.id,
			})
		},
		//搜索
		tosearch() {
			uni.navigateTo({
				url: "/personalData/search/search",
			})
		},
		tourl(item, index) {
			console.log('index'+index)		
			
			if(index == 1){
				uni.switchTab({
					url:item.path,
				})
			}else{
				uni.navigateTo({
					url: item.path,
				})
			}
		},
		//轮播图跳转
		topages(link_url) {
			console.log(link_url)
			uni.navigateTo({
				url: link_url,
			})
		},
		//定位
		getplace() {
			this.location = []
			let that = this
			uni.getLocation({
				type: "wgs84",
				success: function (res) {
					console.log("当前位置的经度：" + res.longitude)
					console.log("当前位置的纬度：" + res.latitude)
					console.log(res.latitude, res.longitude)
					that.getlocation(res.latitude, res.longitude)
				},
			})
		},
		getlocation(latitude, longitude) {
			this.location.push(longitude, latitude)

			this.$http({
				url: "api/Wechat/getLocationCity",
				data: {
					location: this.location.join(","),
				},
			}).then((palce) => {
				this.address = palce.data
			})
		},
	},
}
</script>

<style>
page {
	background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
$nav-height: 30px;

.city {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 300rpx;
	margin-left: 4px;

	// -webkit-line-clamp: 1;
	// display: -webkit-box;
	// -webkit-box-orient: vertical;
	// overflow: hidden;
	// text-overflow: ellipsis;
	image {
		width: 26rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.cityname {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}
}

.input-view {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	// width: 500rpx;
	flex: 1;
	// background-color: #f8f8f8;
	height: $nav-height;
	// border-radius: 15px;
	// padding: 0 15px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	flex-wrap: nowrap;
	margin: 7px 0;
	line-height: $nav-height;
	font-size: 36rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
}

.searchbox {
	width: 100%;
	height: 134rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	// justify-content: space-between;

	.search {
		width: 690rpx;
		height: 40rpx;
		padding: 15rpx 0;
		background: #ffffff;
		border-radius: 36rpx;
		border: 2rpx solid #f94d29;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.scan {
			width: 76rpx;
			text-align: center;
			border-right: solid 2rpx #f2f2f2;

			image {
				width: 32rpx;
				height: 26rpx;
			}
		}

		.inputbox {
			width: 458rpx;
			height: 40rpx;
			padding: 0 24rpx;

			>input {
				width: 100%;
			}
		}

		.searchbut {
			width: 112rpx;
			height: 62rpx;
			background: linear-gradient(180deg, #f94d29 0%, #f99529 100%);
			border-radius: 36rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #f7f7f7;
			line-height: 62rpx;
			text-align: center;
			margin-right: 5rpx;
		}
	}

	.scancode {
		width: 90rpx;
		text-align: center;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}
}

.swiper {
	height: 346rpx;
	background: #ebabab;
	border-radius: 16rpx;
	width: 690rpx;
	margin: 0 auto;

	.swiper-item {
		display: block;
		height: 346rpx;
		line-height: 346rpx;
		text-align: center;
		width: 100%;
		border-radius: 16rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}
}

.category {
	display: flex;
	width: 690rpx;
	margin: 24rpx auto;
	height: 238rpx;
	background-color: #fff;
	align-items: center;
	border-radius: 20rpx;

	.catelist {
		width: 33.3%;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
		text-align: center;

		image {
			width: 124rpx;
			height: 126rpx;
		}
	}
}

.popupbox {
	background: url(https://zdcloud.zxkjnc.com/images/2d263.png) no-repeat;
	width: 669rpx;
	height: 890rpx;
	background-size: 669rpx 890rpx;

	.scroll-Y {
		max-height: 580rpx;
		margin-top: 160rpx;

		.couponlist {
			width: 520rpx;
			height: 130rpx;
			// background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.16);
			border-radius: 12rpx;
			display: flex;
			margin: 22rpx auto 0 auto;
			align-items: center;

			.leftbox {
				width: 122rpx;
				height: 130rpx;
				background: #fef9e6;
				box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.09);
				border-radius: 12rpx;
				font-size: 40rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #fe5326;
			}

			.rightbox {
				width: 375rpx;
				height: 130rpx;
				background: #ffffff;
				box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.16);
				border-radius: 12rpx;
				position: relative;
				// display: flex;
				align-items: center;
				justify-content: space-between;

				.rule {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #222222;
					margin: 30rpx 0 10rpx 10rpx;
				}

				.time {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #555555;
					margin-left: 10rpx;

					.butbox {
						width: 100rpx;
						height: 42rpx;
						border-radius: 28rpx;
						border: 2rpx solid #f94d29;
						line-height: 42rpx;
						text-align: center;
						font-size: 22rpx;
						font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
						font-weight: normal;
						color: #f94d29;
						margin-top: -15rpx;
						margin-right: 10rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.coupontype {
					position: absolute;
					top: 0;
					right: 0;
					width: 156rpx;
					height: 40rpx;
					background: linear-gradient(90deg, #fde4c8 0%, #fce0b8 55%, #fde4c8 100%);
					border-radius: 0rpx 12rpx 0rpx 12rpx;
					font-size: 22rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #83431f;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}
	}
}

.gb {
	margin: 30rpx auto 0 auto;
	text-align: center;

	image {
		width: 60rpx;
		height: 60rpx;
	}
}
</style>
